<template>
	<view v-show="isPopup" class="loading-popup">
		<view v-show="shadeShow" class="shade-popup" :class="[ani]" @click="close(shadeClick)"></view>
		<view class="loading-content" :class="[ani]" :style="[{height:height,width:width,backgroundColor:backgroundColor}]">
			<slot></slot>
			<!-- <view class="circle-loading" v-show="!custom&&type==1">
				<view class="dot">
					<view class="first-dot"></view>
				</view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
			</view>
			<view class="rectangle-loading" v-show="!custom&&type==2">
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
			</view> -->
			<image class="breathing-image " src="../static/images/logo.png" style="width:65px;height: 55px;"></image>
			<view style="color: #5b5b5b;margin-top: 2px;font-size: 12px;">
				加载中...
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name: 'loading',
		props:{
			shadeShow:{
				value:Boolean,
				default:true
			},
			shadeClick:{
				value:Boolean,
				default:false
			},
			custom:{
				value:Boolean,
				default:false
			},
			type:{
				value:Number,
				default:2
			},
			width:{
				value:String,
				default:"180rpx"
			},
			height:{
				value:String,
				default:"180rpx"
			},
			backgroundColor:{
				value:String,
				default:"#fff"
			},
			callback:{
				type:Function,
				default:function () {
					
				}
			}
		},
		data(){
			return{
				isPopup:false,
				ani:''
			}
		},
		methods:{
			open(){
				this.isPopup=true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'open-animation'
					}, 30);
				})
			},
			close(){
				let isClose = v == false ? false:true;
				if(isClose){
					this.ani = ''
					setTimeout(() => {
						this.isPopup=false;
						this.$emit('callback');
					}, 200);
				}	
			},
		}
	}
</script>

<style lang="scss">
	/*弹窗*/
	.loading-popup{
		.shade-popup{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: #000;
			opacity: 0;
			transition: all .6s;
			z-index: 998;
		}
		.shade-popup.open-animation{
			opacity: 0.5;
		}
		.loading-content{
			z-index: 999;
			position: fixed;
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
			border-radius: 20rpx;
			margin: auto;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transform: scale(1.2);
			transition: all .6s;
			opacity: 0;
			display: flex;
			flex-direction: column;
		}
		.loading-content.open-animation{
			transform: scale(1);
			opacity: 1;
		}
	}
	

.breathing-image {  
    display: block;  
    width: 300px; /* 初始宽度，可根据需要调整 */  
    height: auto; /* 保持图片比例 */  
    animation: breathing 2s infinite; /* 应用呼吸动画 */  
}  
  
@keyframes breathing {  
    0%, 100% {  
        transform: scale(1); /* 原始大小 */  
    }  
    50% {  
        transform: scale(1.2); /* 放大到1.1倍 */  
    }  
}
</style>
